/**
 * Created by zhangsong on 2019-05-13.
 */
import React, { Component } from 'react';
import { Form, Input, Button, Spin } from 'antd';
import moment from 'moment';
import { formatMessage } from '@/utils/i18n';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { VehicleApplication } from '@/constants/routes';
import { searchToMap } from '@/utils/utils';
import VehicleReducer from '@/dva/application/vehicles';
import Style from './index.module.scss';

const { Namespace, Effects } = VehicleReducer;

@connect(
  state => ({
    vehicleStore: state[Namespace],
  }),
  dispatch => ({
    getById: data =>
      dispatch({
        type: `${Namespace}/${Effects.getVehicleById}`,
        data,
      }),
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const { search } = props.location;
    const obj = searchToMap(search);
    this.state = {
      id: obj.id,
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById } = this.props;
    getById(id);
  }

  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };

  handleUpdate = () => {
    const { history } = this.props;
    const { id } = this.state;
    history.push(`${VehicleApplication.modify.url}?id=${id}`);
  };

  render() {
    const { form, vehicleStore = {} } = this.props;
    const { getFieldDecorator } = form;
    const { vehicleInfo = {}, detailLoading } = vehicleStore;
    return (
      <PageHeaderWrapper>
        <Spin spinning={!!detailLoading} size="large">
          <div className={`${Style.body}`}>
            <div className={Style.excelTitle}>
              <h1>THIRD RUNWAY DIVISION SITE PROCEDURES</h1>
              <h1>APPLICATION FOR VEHICLE ENTRY/PARKING PERMIT</h1>
            </div>
            <Form labelAlign="right" onSubmit={this.handleSubmit}>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong className={`${Style.underLine} ${Style.font16}`}>PART A</strong>
                  <i>(TO BE COMPLETED BY THE APPLICANT)</i>
                </div>
                <div>
                  <Form.Item label={formatMessage('applicationVehicle.columns.fullName.name')}>
                    {getFieldDecorator('fullName', {
                      initialValue: vehicleInfo.fullName,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                </div>
                <div className={Style.detail}>
                  <div className={`${Style.underLine} ${Style.font16}`}>Particulars of Vehicle</div>
                  <Form.Item label={formatMessage('applicationVehicle.columns.vehicleNumber.name')}>
                    {getFieldDecorator('vehicleNumber', {
                      initialValue: vehicleInfo.vehicleNumber,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationVehicle.columns.make.name')}>
                    {getFieldDecorator('make', {
                      initialValue: vehicleInfo.make,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationVehicle.columns.colour.name')}>
                    {getFieldDecorator('colour', {
                      initialValue: vehicleInfo.colour,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationVehicle.columns.category.name')}>
                    {getFieldDecorator('category', {
                      initialValue: vehicleInfo.category,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationVehicle.columns.expiryDate.name')}>
                    {getFieldDecorator('expiryDate', {
                      initialValue: vehicleInfo.expiryDate
                        ? moment(vehicleInfo.expiryDate).format(
                            formatMessage('datetimeFormat.date'),
                          )
                        : null,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                </div>

                <div>
                  <Form.Item label={formatMessage('applicationVehicle.columns.staffNo.name')}>
                    {getFieldDecorator('staffNo', {
                      initialValue: vehicleInfo.staffNo,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationVehicle.columns.department.name')}>
                    {getFieldDecorator('department', {
                      initialValue: vehicleInfo.department,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationVehicle.columns.telNo.name')}>
                    {getFieldDecorator('telNo', {
                      initialValue: vehicleInfo.telNo,
                    })(<Input maxLength={50} readOnly />)}
                  </Form.Item>
                </div>
              </div>
              {/* <Form.Item */}
              {/*  label={formatMessage('applicationVehicle.columns.file.name')} */}
              {/*  // extra="表格扫描文件" */}
              {/* > */}
              {/*  {getFieldDecorator('upload', {})( */}
              {/*    <Upload */}
              {/*      name="logo" */}
              {/*      accept="image/*" */}
              {/*      listType="picture" */}
              {/*    > */}
              {/*      <Button> */}
              {/*        <Icon type="upload" /> Click to upload */}
              {/*      </Button> */}
              {/*    </Upload>, */}
              {/*  )} */}
              {/* </Form.Item> */}
              <div className={Style.bottom}>
                <Button htmlType="button" icon="rollback" onClick={this.handleGoBack}>
                  {formatMessage('button.rollback')}
                </Button>
                <Button type="primary" htmlType="button" icon="edit" onClick={this.handleUpdate}>
                  {formatMessage('button.update')}
                </Button>
              </div>
            </Form>
          </div>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
